/*
 * @Author: jiameng15
 * @Date: 2020-03-04 22:47:07
 * @Last Modified by: jiameng15
 * @Last Modified time: 2020-04-14 20:42:59
 */
<template>
  <div>
    <!-- <div class="sd-page-line"></div> -->
    <div class="row-main">
      <el-button type="shenda" size="mini"  @click="initData" icon="el-icon-refresh">刷新数据</el-button>
      <el-button type="shenda" size="mini"  @click="addNewNotice" icon="el-icon-plus" >新增套餐组</el-button>
      <el-table
        :data="tableData"
        align="center"
        ref="formData"
        :loading="mainTableLoading"
        class="row-main-table"
        :header-cell-style="{ 'background':$store.state.app.tableBgColor,'color':'#606266' }"
      >
        <el-table-column prop="headName" label="套餐组名称" align="center">
          <template v-slot="{ row, rowIndex }">
            <el-tooltip class="item" effect="dark" content="进入套餐组" placement="bottom">
              <span v-text="row.headName" class="click_text" @click="toDetails(row)"></span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template v-slot="{ row, rowIndex }">
            <el-dropdown trigger="click">
              <div>
                <svg-icon class="el-dropdown-link" icon-class="operation"></svg-icon>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-button class="operation" style="width: 100%;" @click="editEvent(row)" v-has="'editBaseInfo'">编辑</el-button>
                <el-button class="operation" style="width: 100%;" @click="toDetails(row)" v-has="'editPackage'">进入</el-button>
                <el-button class="operation" style="width: 100%;" @click="deleteNoticeConfirm(row)" v-has="'openOrClose'" v-preventReClick>删除</el-button>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <div :style="{'overflow-x': $store.state.app.screenWidth<992?'scroll':'none'}">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          class="row-main-pager"
          :current-page.sync="page.current"
          :page-size="page.size"
          :total="page.total"
          layout="total, sizes, prev, pager, next, jumper"
          background></el-pagination>
      </div>
    </div>
    <el-dialog
      class="delete"
      top="33vh"
      :visible.sync="deleteNoticeVisible"
      :append-to-body="true"
      width="30%"
    >
      <span style="display: flex; justify-content: center;">确定删除【<span v-text="deleteRow.headName" class="click_text"></span>】余额套餐组</span>
      <span class="dialog-footer" slot="footer">
        <el-button @click="deleteNoticeVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="deleteNoticeFunc()" size="small" v-preventReClick>确 定</el-button>
      </span>
    </el-dialog>
    <el-drawer
      class="drawer_form"
      size="50%"
      :title="noticeTitle"
      :visible.sync="drawer"
      direction="ttb"
      :before-close="handleClose"
    >
      <div class="sd-drawer-content notice_drawer_form custom_drawer_content">
        <div class="sd-drawer-content-pannel">
          <el-form ref="saveInfo" :model="saveInfo" :rules="formRules">
            <el-row>
              <el-col :xl="{ span: 20, push: 1 }" :lg="{ span: 20, push: 1 }">
                <el-form-item label="套餐组:" label-width="120px" prop="headName">
                  <el-input
                    size="small"
                    v-model="saveInfo.headName"
                    placeholder="请输入套餐组名称"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <div class="sd-drawer-footer">
        <div class="buttons">
          <el-button
            @click="submitHandle('saveInfo')"
            size="small"
            type="primary"
            v-preventReClick
            style="margin-left: 10px"
          >提交</el-button>
          <!-- <el-button @click="handleClose" size="small">关闭</el-button> -->
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {
  outboundList,
  listForAgentForInntSelect,
  listOrdinaryUsers,
  getOrdinaryAgent,
  outboundOrderSave,
  outBoundAppointagent,
  getLoginName,
  excelDownload,
  uploadUserPicture, // 上传图片
  getbalanceHeadList, // 获取公告列表
  saveBalanceHead, // 保存公告
  deletebalanceHead // 删除公告
} from "@/api/getData";
import { getStore, setStore } from "@/config/mUtils";
import { subStringForExceptLetter } from "@/utils/utils";
import Editor from "@/components/Editor";

var qiniu = require("qiniu-js");
var imgUrl = localStorage.getItem("image");
export default {
  name: "StockOut",
  data() {
    return {
     deleteRow:{},

      // 图片上传
      upload_qiniu_addr: imgUrl,
      upload_qiniu_url: "https://upload.qbox.me",
      qiniuData: {},
      // 新增、修改-数据对象
      saveInfo: {
        title: "",
        contentText: "",
        sendNumber: "",
        expirationDate: "",
        dictNoticeType: "",
        clickNumber: "0",
        picUrl: ""
      },
      // 抽屉
      noticeTitle: "",
      drawer: false,
      direction: "ttb",

      formData: {
        id: null,
        title: null,
        contentText: null,
        sendNumber: null,
        expirationDate: null,
        dictNoticeType: null
      },
      typeList: [{ label: "PC端", value: "PC" }, { label: "C端", value: "C" }],
      // ----↓修改公告
      submitLoading: false,
      showEdit: false,
      deleteNoticeVisible: false,
      buttonRetryLoading: false,
      startDate: [],
      endDate: [],
      // 查询条件
      searchForm: {
        title: "",               // 标题
        dictNoticeType: "",      // 通知类型 选择框  pc端为PC   C端为 C
        startExpirationDate: "", // 发布开始时间
        startSendDate: "",       // 到期开始时间
        endExpirationDate: "",   // 发布结束时间
        endSendDate: ""          // 到期结束时间
      },
      // loading...
      loading: false,
      searchLoading: false,
      mainTableLoading: false,
      // 分页
      page: {
        current: 1,
        size: 10,
        total: 0,
        ascs: [],
        descs: []
      },
      //
      tablePage: {
        pageSize: 15,
        pageSizes: [5, 15, 20, 50, 100, 200, 500, 1000]
      },
      tableData: [],
      value: false,
      tableLoading: false,
      id: "",
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      formRules: {
        headName: [{ required: true, message: "请输入套餐组名称", trigger: "blur" }],
      }
    };
  },
  components: {
    Editor
  },
  watch: {
    user: function(val, oldval) {
      this.form.belongId = val.value;
      this.form.username = val.label;
    }
  },
  created() {
    // 读取session里的查询参数
    let searchObj = sessionStorage.getItem(this.$route.path);
    // console.log(searchObj)
    if (searchObj != undefined && searchObj != null && searchObj != "") {
      this.searchForm = JSON.parse(searchObj);
      // console.log(this.searchForm);
      if (this.searchForm.startSendDate !== "") {
        this.startDate.push(this.searchForm.startSendDate);
      }
      if (this.searchForm.endSendDate !== "") {
        this.startDate.push(this.searchForm.endSendDate);
      }
      if (this.searchForm.startExpirationDate !== "") {
        this.endDate.push(this.searchForm.startExpirationDate);
      }
      if (this.searchForm.endExpirationDate !== "") {
        this.endDate.push(this.searchForm.endExpirationDate);
      }
      this.page = this.searchForm.page;
    }
    this.initData();
  },

  methods: {
    toDetails(obj){
        this.$router.push({path:'/road/balanceRoad',query:{headerId:obj.id}});
    },

    // 新增
    addNewNotice() {
      this.noticeTitle = "新增套餐组";
      this.saveInfo = {
        headName: "",
      };
      this.drawer = true;
    },
    // 编辑
    editEvent(row) {
      this.noticeTitle = "编辑套餐组";
      this.saveInfo = {
        id:row.id,
        headName: row.headName,
      };
      this.drawer = true;
      // this.showEdit = true
    },
    // 保存-校验
    submitHandle(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          // console.log(this.saveInfo);
          this.saveNewNoticeFunc();
        } else {
          // console.log('error submit!!');
          return false;
        }
      });
    },
    // 保存-接口
    async saveNewNoticeFunc() {
      const returnData = await saveBalanceHead(this.saveInfo);
      if (returnData._result) {
        this.$message.success("提交成功");
        this.initData();
        this.drawer = false;
      }
    },
    // 删除
    deleteNoticeConfirm(row) {
      this.deleteRow = row;
      this.deleteNoticeVisible = true;
    },
    // 删除-接口
    async deleteNoticeFunc() {
      const returnData = await deletebalanceHead({
        id: this.deleteRow.id
      });
      if (returnData._result) {
        this.$message.success("提交成功");
        this.deleteNoticeVisible = false;
        this.initData();
      }
    },
    // 发布时间区间
    changeDate() {
      // console.log(this.startDate);
      if (this.startDate) {
        this.searchForm.startSendDate = this.startDate[0];
        this.searchForm.endSendDate = this.startDate[1];
      } else {
        this.searchForm.startSendDate = "";
        this.searchForm.endSendDate = "";
      }
    },
    // 到期时间区间
    changeDate1() {
      // console.log(this.endDate);
      if (this.endDate) {
        this.searchForm.startExpirationDate = this.endDate[0];
        this.searchForm.endExpirationDate = this.endDate[1];
      } else {
        this.searchForm.startExpirationDate = "";
        this.searchForm.endExpirationDate = "";
      }
    },

    handleSizeChange(val){
      this.page.size = val;
      this.page.current = 1;
      this.initData();
    },
    handleCurrentChange(val){
      this.page.current = val;
      this.initData();
    },
    // 关闭抽屉
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
          this.$refs.saveInfo.clearValidate();
          this.$refs.saveInfo.resetprops();
          // this.saveInfo={
          //   title:'',
          //   contentText:'',
          //   sendNumber:'',
          //   expirationDate:'',
          //   dictNoticeType:'',
          //   clickNumber:'0'
          // }
        })
        .catch(_ => {});
    },
    beforeinitData(){
        this.page.current = 1
        this.initData()
    },
    // 初始化-列表
    async initData(theKey) {
      this.mainTableLoading = true;
      this.searchForm.page = this.page;
      // 保存查询参数到session
      sessionStorage.setItem(this.$route.path, JSON.stringify(this.searchForm));
      const returnData = await getbalanceHeadList(this.searchForm, {
        obj: this,
        key: "tableLoading;" + theKey
      });
      this.tableData = [];
      //console.log(returnData)
      if (returnData._result) {
        // 数据回显
        returnData.data.records.map(item => {
          const data = {};
          data.id = item.id;
          data.oemId = item.oemId;
          data.headName = item.headName;
          this.tableData.push(data);
        });
        this.tableLoading = false;
        this.page.total = returnData.data.total;
      }
      this.mainTableLoading = false;
    },
    // 重置-查询条件
    resetForm(formName) {
      // this.$refs[formName].resetprops();
      this.startDate = "";
      this.endDate = "";
      this.searchForm = {
        title: "",               // 标题
        dictNoticeType: "",      // 通知类型 选择框  pc端为PC   C端为 C
        startExpirationDate: "", // 发布开始时间
        startSendDate: "",       // 到期开始时间
        endExpirationDate: "",   // 发布结束时间
        endSendDate: ""          // 到期结束时间
      };
    }
  }
};
</script>
<style scoped lang="scss">
.el-popper[x-placement^=bottom] {
    margin-right: -31px;
    box-shadow: 0px 0px 10px #888888;
    margin-left: 6px;

    .operation {
      border: 0;
      outline: none;
      display: block;
      text-align: center;
      margin: 0;
    }
  }
  .el-popper[x-placement^=top] {
    box-shadow: 0px 0px 10px #888888;
    margin-left: 6px;
    margin-right: -31px;

    button {
      display: block;
    }

    .operation {
      border: 0;
      outline: none;
      display: block;
      text-align: center;
      margin: 0;
    }
  }

.drawer_form {
  padding: 50px;
  overflow-y: auto;
  .custom_drawer_content{
    width: 90%;
  }
}
/deep/.el-drawer.ttb {
    width: 500px;
    left: 50%;
    margin-left: -250px;
    /* right:50%; */
  }
// .notice_drawer_form {
//   width: 100%;
// }
.recentAdd li {
  list-style: none;
  float: left;
  margin-right: 5px;
  line-height: 15px;
}
</style>
<style>
.el-drawer.ttb {
  width: 800px;
  left: 50%;
  margin-left: -400px;
  /* right:50%; */
}
</style>
